<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <c :son-number1="fatherNumber1" :son-number2="fatherNumber2" @num1-input="num1Input" @num2-input="num2Input"></c>
</div>

<template id="cpn">
  <div>
<!--    //这里props和data的数据还是有点不同的-->
    <h1>son1Props={{sonNumber1}}</h1>
    <h1>son1Data={{sonNum1}}</h1>
    <!--    事件名还是要写对的，不然都不知道莫明奇妙的报错-->
    <input type="text" v-model="sonNum1"/>
    <h1>son2Props={{sonNumber2}}</h1>
    <h1>son2Data={{sonNum2}}</h1>
    <input type="text" v-model="sonNum2"/>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  Vue.component('c', {
    template: `#cpn`,
    data() {
      return {
        sonNum1: this.sonNumber1,
        sonNum2: this.sonNumber2,
      }
    },
    props: {
      sonNumber1: {
        type: Number
      },
      sonNumber2: {
        type: Number
      }
    },
    watch: {
      sonNum1(newValue) {
        this.sonNum2 = newValue * 100;
        this.$emit('num1-input', newValue);
      },
      sonNum2(newValue) {
        this.sonNum1 = newValue / 100;
        this.$emit('num2-input', newValue);
      }
    }
  })

  //let(变量)和const(常量)
  const app = new Vue({
    el: '#app',
    data: {
      fatherNumber1: 0,
      fatherNumber2: 1,
    },
    methods: {
      num1Input(value) {
        //这里之所以解析，是因为vue自动将value解析成了string类型，那么因为this.fatherNumber是number的类型，自然就会报错。
        this.fatherNumber1 = parseFloat(value);
      },
      num2Input(value) {
        this.fatherNumber2 = parseFloat(value);
      }
    }
  })
</script>

</body>
</html>